<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment(title,active)">
    <meta charset="utf-8"/>
    <title>
        <th:block th:text="${title!=null?title:'博客后台'}"></th:block>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link th:if="${setting} eq null or ${setting.logo} eq null or ${setting.logo} eq ''" rel="shortcut icon" th:href="@{/user/img/bloglogo.jpg}"/>
    <link th:if="${setting} ne null and ${setting.logo} ne null and ${setting.logo} ne ''" rel="shortcut icon" th:href="@{${setting.logo}}"/>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css"
          rel="stylesheet">


    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

    <link th:href="@{/back/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/back/css/style.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/back/css/sweetalert2.min.css}" rel="stylesheet"/>

    <script th:src="@{/back/js/html5shiv.js}"></script>
    <script th:src="@{/back/js/respond.min.js}"></script>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2608271_z9f09hex6q.css">


    <style>
        #sidebar-menu ul ul a:hover {
            color: #7a8c53;
        }
    </style>

</head>


<div th:fragment="header-body">

    <div class="topbar">
        <div class="topbar-left">
            <div class="text-center p-t-10" style="margin: 0 auto;">
                <div class="pull-left" style="padding-left: 10px;">
                    <a th:href="@{pear_admin}">
                        <img th:src="@{/user/img/bloglogo.jpg}" width="50" height="50"/>
                    </a>
                </div>
                <div class="pull-left" style="padding-left: 10px;">
                    <span style="font-size: 28px; color: #2f353f; line-height: 50px;">yblog</span>
                </div>
            </div>
        </div>
        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="">
                    <div class="pull-left">
                        <button type="button" class="button-menu-mobile open-left">
                            <i class="fa fa-bars"></i>
                        </button>
                        <span class="clearfix"></span>
                    </div>

                    <ul class="nav navbar-nav navbar-right pull-right">
                        <li class="dropdown">
                            <a th:href="@{index.html}" class="dropdown-toggle profile" data-toggle="dropdown"
                               aria-expanded="true">
                                <img th:if="${userDetail} eq null or ${userDetail.getIcon()} eq '' or ${userDetail.getIcon()} eq null  "
                                     th:src="@{/user_img/user_default.jpg}" alt="user-img" class="img-circle"/>
                                <img th:if="${userDetail} ne null and  ${userDetail.getIcon()} ne '' and  ${userDetail.getIcon()} ne null"
                                     th:src=" ${userDetail.getIcon()}" alt="user-img" class="img-circle"/>
                            </a>
                            <ul class="dropdown-menu">
                                <form name="logoutform" th:action="@{/logout}" method="post"></form>
                                <li><a th:href="@{${commons.site_url()}}" target="_blank">
                                    <i class="fa fa-eye" aria-hidden="true"></i>查看网站</a></li>
                                <li><a href="javascript:document.logoutform.submit();">
                                    <i class="fa fa-sign-out"></i> 用户注销</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--    -->
    <div class="left side-menu">
        <div class="sidebar-inner slimscrollleft">
            <div id="sidebar-menu">

                <ul>
                    <li th:class="${active}=='home'?'active':''">
                        <a th:href="@{pear_admin}"
                           th:class="${active}=='home'?'waves-effect active':'waves-effect'"><i
                                class="fa fa-dashboard" aria-hidden="true"></i><span> 仪表盘 </span></a>
                    </li>


                    <!--                    下拉菜单开始-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="iconfont icon-16"></i><span>文章</span><b class="caret"></b></a>


                        <ul class="dropdown-menu">
                            <li th:class="${active}=='publish'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{pear_admin}"
                                   th:class="${active}=='publish'?'waves-effect active':'waves-effect'"><i
                                        class="fa fa-pencil-square-o" aria-hidden="true"></i><span> 发布文章 </span></a>
                            </li>
                            <li th:class="${active}=='article'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{pear_admin}"
                                   th:class="${active}=='article'?'waves-effect active':'waves-effect'"><i
                                        class="fa fa-list" aria-hidden="true"></i><span> 文章管理 </span></a>
                            </li>
                            <li th:class="${active}=='category'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{pear_admin}"
                                   th:class="${active}=='category'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-icon04" aria-hidden="true"></i><span> 分类/标签 </span></a>
                            </li>
                        </ul>
                    </li>
                    <!--                    下拉菜单结束-->

                    <li th:class="${active}=='charts'?'active':''">
                        <a th:href="@{/chart/list}"
                           th:class="${active}=='charts'?'waves-effect active':'waves-effect'"><i
                                class="iconfont icon-tongjitubiao" aria-hidden="true"></i><span>图表</span></a>
                    </li>


                    <li th:class="${active}=='img'?'active':''">
                        <a th:href="@{/img/list}"
                           th:class="${active}=='img'?'waves-effect active':'waves-effect'">
                            <i class="iconfont icon-attachment" aria-hidden="true"></i><span> 附件 </span></a>
                    </li>

<!--                    由于采用插件，所以该功能暂停使用-->

<!--                    <li th:class="${active}=='comments'?'active':''">-->
<!--                        <a th:href="@{/admin/toCommentList/}"-->
<!--                           th:class="${active}=='comments'?'waves-effect active':'waves-effect'">-->
<!--                            <i class="fa fa-comments" aria-hidden="true"></i><span> 评论 </span></a>-->
<!--                    </li>-->


                    <!--                    下拉菜单开始-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="iconfont icon-pachong" aria-hidden="true"></i><span>爬虫</span><b
                                class="caret"></b></a>


                        <ul class="dropdown-menu">
                            <li th:class="${active}=='catchArticle'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/catchArticle/list}"
                                   th:class="${active}=='catchArticle'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-shoudongzhuaqushuju"
                                       aria-hidden="true"></i><span> 抓取文章 </span></a>
                            </li>

                        </ul>
                    </li>
                    <!--                    下拉菜单结束-->


                    <!--                    下拉菜单开始-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="iconfont icon-yonghu" aria-hidden="true"></i><span>用户</span><b class="caret"></b></a>


                        <ul class="dropdown-menu">
                            <li th:class="${active}=='userManager'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/usermanager/list}"
                                   th:class="${active}=='userManager'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-yonghuguanli" aria-hidden="true"></i><span> 用户管理 </span></a>
                            </li>
                            <li th:class="${active}=='link'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/link/list}"
                                   th:class="${active}=='link'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-icon_xinyong_xianxing_jijin-" aria-hidden="true"></i><span> 友链管理 </span></a>
                            </li>
                            <li th:class="${active}=='user'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/myuser/list}"
                                   th:class="${active}=='user'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-gerenziliao" aria-hidden="true"></i><span> 个人资料 </span></a>
                            </li>
                        </ul>
                    </li>
                    <!--                    下拉菜单结束-->

                    <!--                    下拉菜单开始-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="iconfont icon-fangke" aria-hidden="true"></i><span>访客</span><b
                                class="caret"></b></a>


                        <ul class="dropdown-menu">
                            <li th:class="${active}=='visitor'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/visitor/list}"
                                   th:class="${active}=='visitor'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-fangke" aria-hidden="true"></i><span> 访客记录 </span></a>
                            </li>
                            <li th:class="${active}=='black'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/black/list}"
                                   th:class="${active}=='black'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-ziyuan" aria-hidden="true"></i><span> 黑名单 </span></a>
                            </li>
                            <li th:class="${active}=='ipsearch'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a th:href="@{/visitor/ipsearchList}"
                                   th:class="${active}=='ipsearch'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-chaxun" aria-hidden="true"></i><span> IP查询 </span></a>
                            </li>
                            <li th:class="${active}=='visitor'?'active':''"
                                style=" width: 240px;height: 49.3667px;background-color: #272c35;">
                                <a href="#"
                                   th:class="${active}=='visitor'?'waves-effect active':'waves-effect'">
                                    <i class="iconfont icon-lanjiedingdan"
                                       aria-hidden="true"></i><span> 拦截记录 </span></a>
                            </li>
                        </ul>
                    </li>
                    <!--                    下拉菜单结束-->


                    <li th:class="${active}=='monitor'?'active':''">
                        <a th:href="@{/monitor/list}"
                           th:class="${active}=='monitor'?'waves-effect active':'waves-effect'">
                            <i class="iconfont icon-jiankong" aria-hidden="true"></i><span> 监控 </span></a>
                    </li>


                    <!--                待实现-->

                    <li th:class="${active}=='setting'?'active':''">
                        <a th:href="@{pear_admin}"
                           th:class="${active}=='setting'?'waves-effect active':'waves-effect'">
                            <i class="fa fa-gear" aria-hidden="true"></i><span> 系统设置 </span></a>
                    </li>

                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <!--    -->


</div>


</html>